<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { VideoCamera, User, Message, Iphone, Lock } from '@element-plus/icons-vue'
import { register } from '@/api/user'

const router = useRouter()

const form = ref({
  uname: '',
  password: '',
  email: '',
  phone: '',
})
const loading = ref(false)

const validate = () => {
  if (!form.value.uname || !form.value.password) {
    ElMessage.warning('请输入用户名与密码')
    return false
  }
  if (form.value.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email)) {
    ElMessage.warning('邮箱格式不正确')
    return false
  }
  if (form.value.phone && !/^1[3-9]\d{9}$/.test(form.value.phone)) {
    ElMessage.warning('手机号码格式不正确')
    return false
  }
  return true
}

const onSubmit = async () => {
  if (!validate()) return
  loading.value = true
  try {
    const res = await register(form.value)
    if (res.code === '200') {
      ElMessage.success(res.msg || '注册成功')
      router.push('/login')
    } else {
      ElMessage.error(res.msg || '注册失败')
    }
  } catch (e) {
    // 错误提示由拦截器统一处理
  } finally {
    loading.value = false
  }
}

const goLogin = () => router.push('/login')
</script>

<template>
  <div class="auth-wrapper">
    <div class="film-strip" aria-hidden="true" />
    <div class="glass-card">
      <div class="brand">
        <el-icon size="28" class="brand-icon"><VideoCamera /></el-icon>
        <span class="brand-title">电影购票系统 · 注册</span>
      </div>

      <div class="desc">创建你的电影帐号，随时收藏与购票</div>

      <el-form :model="form" label-position="top" class="auth-form" @keyup.enter="onSubmit">
        <el-form-item label="用户名">
          <el-input v-model="form.uname" placeholder="例如：cinephile" clearable>
            <template #prefix>
              <el-icon><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password" type="password" placeholder="不少于 6 位" show-password>
            <template #prefix>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱（可选）">
          <el-input v-model="form.email" placeholder="example@movie.com" clearable>
            <template #prefix>
              <el-icon><Message /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="手机（可选）">
          <el-input v-model="form.phone" placeholder="用于找回密码或通知" clearable>
            <template #prefix>
              <el-icon><Iphone /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="primary" size="large" class="submit-btn" :loading="loading" @click="onSubmit">
          完成注册
        </el-button>
      </el-form>

      <div class="extra">
        已有账号？
        <el-link type="primary" @click="goLogin">去登录</el-link>
      </div>
    </div>
  </div>
</template>

<style scoped>
.auth-wrapper {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(1200px 600px at 20% 20%, #1a1a1a 0%, #0c0c0c 40%, #070707 100%),
              linear-gradient(135deg, #1f2b38, #0d1117);
  position: relative;
  overflow: hidden;
}

.film-strip {
  position: absolute;
  inset: -10% -20% auto auto;
  height: 240px;
  width: 120%;
  transform: rotate(-8deg);
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.06) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255,255,255,0.06) 2px, transparent 2px);
  background-size: 16px 100%, 100% 16px;
  opacity: 0.35;
  pointer-events: none;
}

.glass-card {
  width: 520px;
  max-width: 92vw;
  border-radius: 16px;
  padding: 28px 28px 22px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #e5eaf3;
  margin-bottom: 8px;
}
.brand-icon { color: #ffd04b; }
.brand-title { font-size: 20px; font-weight: 600; letter-spacing: 1px; }

.desc { color: #9ea5b1; margin-bottom: 12px; }

.auth-form :deep(.el-form-item__label) { color: #cfd3dc; }
.auth-form :deep(.el-input__wrapper) {
  background: rgba(255,255,255,0.08);
}

.submit-btn {
  width: 100%;
  margin-top: 10px;
}

.extra {
  margin-top: 14px;
  color: #9ea5b1;
  text-align: center;
}
</style>